<template>
  <view class="page">

    <!-- 头部 -->
    <u-sticky offset-top="0" :bgColor="bgColor">
      <image class="page-bg2" mode="widthFix" :src="imageUrl + 'hg-bg3.png'"></image>
      <u-navbar leftText="停车预约" title=" " @rightClick="rightClick" :autoBack="true" placeholder
                :safeAreaInsetTop="true" :bgColor="bgColor"></u-navbar>
      <view class="tabs-hg1">
        <u-tabs
            :list="tabs1"
            @change="change"
            lineWidth="20"
            lineColor="linear-gradient(90deg, #00BBFF, #5ADA7A)"
            :activeStyle="{
						fontSize: '32rpx',
						color: '#1C274C',
						fontWeight: 'bold',
					}"
            :inactiveStyle="{
						fontSize: '32rpx',
						color: 'rgba(28, 39, 76, 0.6)',
					}"
            itemStyle="padding-left: 15px; padding-right: 15px; height: 106rpx;">
        </u-tabs>
      </view>
    </u-sticky>

    <!-- 主内容 -->
    <view class="page-content">
      <view class="wp">

        <!-- 现在预约 -->
        <view class="lst-hg5" v-if="tabsIndex == 0">
          <view class="li" v-for="(item, index) in list" :key="index">
            <image class="point" mode="widthFix" :src="imageUrl + 'hg-point1.png'"></image>
            <view class="t1">{{ item.name }}</view>
            <view class="t2">
              <image class="icon" mode="widthFix" :src="imageUrl + 'hg-addr1.png'"></image>
              {{ item.address || '未设置地址' }}
            </view>
            <view class="t3">
              <view class="left">
                <view class="t3-i1" style="width: 450rpx">
                  <view class="num">
                    <view class="current" :style="{color: item.color}">{{ item.freeCount }}</view>
                    /
                    <view class="total">{{ item.spaceCount }}</view>
                  </view>
                  <view class="pro">
                    <u-line-progress
                        :percentage="item.freeCount/item.spaceCount*100"
                        :showText="false"
                        height="12rpx">
                    </u-line-progress>
                  </view>
                </view>
                <view class="line" v-if="false"></view>
                <view class="t3-i2" v-if="false">
                  <image class="icon" mode="widthFix" :src="imageUrl + 'hg-dz1.png'"></image>
                  空余充电桩
                  <view class="num">10</view>
                </view>
              </view>
              <view class="right">
                <view class="btn1"
                      @click="go('/pages/parkingReservationForm/parkingReservationForm?item='+encodeURIComponent(JSON.stringify(item)))">
                  预约
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 预约记录 -->
        <view class="lst-hg6" v-if="tabsIndex == 1">
          <view class="li" v-for="(item, index) in list2" :key="index">
            <view class="t1">{{ item.parkInfo.name }}</view>
            <view class="t2">
              <view class="left">
                <view class="t2-i1">
                  <view class="name">{{ item.plate }}</view>
                  <image class="icon" mode="widthFix" :src="imageUrl + 'hg-rz1.png'" v-if="false"></image>
                </view>
                <view class="date">{{ item.start }} ~ {{ item.end }}</view>
              </view>
              <view class="right" v-if="false">
                <view class="price">￥
                  <view class="num">20</view>
                </view>
              </view>
            </view>
            <view class="btns">
              <view class="item a1" @click="cancel(item)">取消</view>
              <view class="item a2"
                    @click="go('/pages/parkingReservationDet/parkingReservationDet?item='+encodeURIComponent(JSON.stringify(item)))">
                查看
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 弹窗 -->
    <u-popup
        :show="popShow1"
        mode="center"
        bgColor="transparent"
        closeable
        @close="popShow1=false"
    >
      <view class="popWin-hg2">
        <image class="bg" mode="widthFix" :src="imageUrl + 'hg-bg6.png'"></image>
        <view class="tit">取消预约</view>
        <view class="desc" v-if="false">预约取消后费用会原路退还</view>
        <view class="cont">
          <view class="t1">预约信息</view>
          <view class="t2">
            <view class="t2-item v2">
              <view class="t2-l">车牌号</view>
              <view class="t2-r">{{ item1.plate }}</view>
            </view>
            <view class="t2-item">
              <view class="t2-l">停车场</view>
              <view class="t2-r">
                {{ item1.parkInfo.name }}
                <image class="icon" mode="widthFix" :src="imageUrl +'hg-addr2.png'" v-if="false"></image>
              </view>
            </view>
            <view class="t2-item">
              <view class="t2-l">入场时间</view>
              <view class="t2-r">{{ item1.start }}</view>
            </view>
            <view class="t2-item">
              <view class="t2-l">出场时间</view>
              <view class="t2-r">{{ item1.end }}</view>
            </view>
            <view class="t2-item" v-if="false">
              <view class="t2-l">手机号</view>
              <view class="t2-r">18888888888</view>
            </view>
          </view>
          <view class="total" v-if="false">
            总额
            <view class="price">￥
              <view class="num">40.00</view>
            </view>
          </view>
        </view>
        <view class="btns">
          <view class="item a1" @click="popShow1=false">取消</view>
          <view class="item a2" @click="queren()">确认</view>
        </view>
      </view>
    </u-popup>

    <u-popup
        :show="popShow2"
        mode="center"
        bgColor="transparent"
        closeable
        @close="popShow2=false"
    >
      <view class="popWin-hg2">
        <image class="bg" mode="widthFix" :src="imageUrl + 'hg-bg2.png'"></image>
        <image class="state-icon" mode="widthFix" :src="imageUrl + 'hg-success1.png'"></image>
        <view class="tit">取消成功</view>
        <view class="desc">您已成功取消该预约</view>
        <view class="btns">
          <view class="item a1" @click="popShow2=false">确认</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {get, post} from "../../api/myHttps";

export default {
  data() {
    return {
      // 头部背景色
      bgColor: 'transparent',

      // 切换
      tabs1: [
        {
          name: '现在预约'
        }, {
          name: '预约记录'
        }
      ],
      tabsIndex: 0,

      // 现在预约
      list1: [
        {
          color: '#FF8100',
          proCurent: '34',
          proTotal: '60'
        },
        {
          color: '#5ADA7A',
          proCurent: '67',
          proTotal: '100'
        },
        {
          color: '#FF2C41',
          proCurent: '10',
          proTotal: '60'
        }
      ],

      // 取消预约弹窗
      popShow1: false,

      // 取消成功弹窗
      popShow2: false,

      list: [],
      list2: [],
      item1: {},
    }
  },
  onLoad() {
    this.nearParkList();
  },
  methods: {
    queren() {
      this.popShow1 = false;
      let ownerId = uni.getStorageSync("ownerId");
      post('/city-mobile/user/deleteGuest?ownerId=' + ownerId + '&guestId=' + this.item1.id).then(res => {
        console.log(res);
        this.listGuest();
        uni.showToast({
          title: "取消成功",
          icon: 'none'
        });
      }).catch(err => {
        console.log(err);
        uni.showToast({
          title: err,
          icon: 'none'
        });
      });
    },
    cancel(item1) {
      this.popShow1 = true;
      this.item1 = item1;
    },
    go(url) {
      uni.navigateTo({
        url: url
      })
    },
    change(e) {
      this.tabsIndex = e.index
      if (e.index === 0) {
        this.nearParkList();
      } else if (e.index === 1) {
        this.listGuest();
      }
    },
    listGuest() {
      let ownerId = uni.getStorageSync("ownerId");
      get('/city-mobile/user/listGuest?ownerId=' + ownerId).then(res => {
        console.log(res);
        this.list2 = res;
      }).catch(err => {
        console.log(err);
        uni.showToast({
          title: err,
          icon: 'none'
        });
      });
    },
    nearParkList() {
      let ownerId = uni.getStorageSync("ownerId");
      let userLongitude = uni.getStorageSync("userLongitude");
      let userLatitude = uni.getStorageSync("userLatitude");
      let url = '/city-mobile/platform/nearParkList' +
          '?current=1&size=100&ownerId=' + ownerId + '&parkName=&userLongitude=' + userLongitude + '&userLatitude=' + userLatitude;
      get(url).then(res => {
        this.list = res.records;
        console.log(this.list);
      }).catch(err => {
        console.log(err);
        uni.showToast({
          title: err,
          icon: 'none'
        });
      });
    }
  },
}
</script>

<style lang="scss">

page {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
  background: #F4FAF7;
}

::v-deep .u-tabs__wrapper__nav__item {
  flex-grow: 1 !important;
}

::v-deep .u-tabs__wrapper__nav__line {
  bottom: 10rpx;
}

</style>
